<script setup lang="ts">
  import Header from '@/components/pages/order/warranty-policy/create/Header.vue'
  import BaseInfo from '@/components/pages/order/warranty-policy/create/BaseInfo.vue'
  import Content from '@/components/pages/order/warranty-policy/create/Content.vue'
  import { nextTick, onMounted, ref } from 'vue'
  import { useWarrantyPolicyForm } from '@/services/pages/good/warrantyPolicy'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { useActiveTab } from '@/services/pages/param-set/commodity-set'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { useRoute, useRouter } from 'vue-router'
  import routeComponentName from '@/config/route-component-name'

  const {
    warrantyPolicyForm,
    saveWarrantyPolicyLoading,
    getWarrantyPolicyDetailLoading,
    saveWarrantyPolicy,
    getwarrantyPolicyDetail,
  } = useWarrantyPolicyForm()

  defineOptions({
    name: routeComponentName.good.warrantyPolictForm,
  })

  // 激活路由对象
  const route = useRoute()

  // 全局路由对象
  const router = useRouter()

  // 内容组件实例
  const contentInstance = ref<InstanceType<typeof Content> | null>(null)

  // 基本信息组件实例
  const baseInfoInstance = ref<InstanceType<typeof BaseInfo> | null>(null)

  // 保修政策名称是否重复
  const isNameRepeat = ref(false)

  /**
   * 确定事件
   */
  const onConfirm = async () => {
    if (baseInfoInstance.value && contentInstance.value) {
      const baseInfo = await baseInfoInstance.value.getForm()
      const content = contentInstance.value.getWarrantyPolicyContent()
      if (baseInfo) {
        warrantyPolicyForm.value.descr = baseInfo.descr
        warrantyPolicyForm.value.goodsTypeVos = baseInfo.goodsTypeVos
        warrantyPolicyForm.value.id = baseInfo.id
        warrantyPolicyForm.value.mobileShow = baseInfo.mobileShow
        warrantyPolicyForm.value.name = baseInfo.name
        warrantyPolicyForm.value.status = baseInfo.status
      }

      if (content) {
        warrantyPolicyForm.value.content = content
      }

      if (baseInfo) {
        const res = await saveWarrantyPolicy()
        if (res) {
          if (res.code === 20000) {
            HMessage.success(infoTip.good.warrantyPolicy.saveSuccess)
            resetForm()
            removeCurrentPage()
            router.push({ path: '/busic/base/proset', query: { isUpdate: 'true' } })
            return
          }

          if (infoTip.good.warrantyPolicy[res.code]) {
            isNameRepeat.value = true
          } else {
            isNameRepeat.value = false
          }

          HMessageBox.error(infoTip.good.warrantyPolicy[res.code] || res.message)
        }
      }
    }
  }

  /**
   * 取消事件
   */
  const onCancel = () => {
    resetForm()
    removeCurrentPage()
    router.push('/busic/base/proset')
  }

  /**
   * 重置表单
   */
  const resetForm = () => {
    if (baseInfoInstance.value && contentInstance.value) {
      baseInfoInstance.value.resetForm()
      contentInstance.value.resetWarrantyPolicyContent()
    }
  }

  /**
   * 移除当前页面
   */
  const removeCurrentPage = () => {
    useTagsViewStore().delView(route.path)
    useActiveTab().setActiveTab('warrantyPolicy')
  }

  onMounted(() => {
    nextTick(() => {
      if (baseInfoInstance.value) {
        baseInfoInstance.value.getGoodTypeOptions()
      }

      if (route.params.id) {
        getwarrantyPolicyDetail(route.params.id as string).then(() => {
          if (baseInfoInstance.value) {
            baseInfoInstance.value.setForm(warrantyPolicyForm.value)
          }

          if (contentInstance.value) {
            contentInstance.value.setWarrantyPolicyContent(warrantyPolicyForm.value.content)
          }
        })
      }
    })
  })
</script>

<template>
  <div class="warranty-policy-create-wrapper">
    <div
      class="warranty-policy-create"
      v-loading="saveWarrantyPolicyLoading || getWarrantyPolicyDetailLoading"
    >
      <div class="header">
        <Header :id="(route.query.id as string)"></Header>
      </div>
      <div class="divider"></div>
      <div class="base-info">
        <base-info :is-name-repeat="isNameRepeat" ref="baseInfoInstance"></base-info>
      </div>
      <div class="content">
        <Content ref="contentInstance"></Content>
      </div>
      <div class="btn-group">
        <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
        <h-button is-modal @click="onCancel">取消</h-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .warranty-policy-create-wrapper {
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .warranty-policy-create {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px;
      display: flex;
      flex-direction: column;

      .divider {
        border-bottom: 1px dotted #e5e5e5;
        margin: 12px 0;
      }

      .header,
      .base-info,
      .content {
        box-sizing: border-box;
        padding: 0 12px;
      }

      .content {
        margin-top: 24px;
        height: 0;
        flex: 1;
      }

      .btn-group {
        display: flex;
        justify-content: center;
        column-gap: 12px;
        margin-top: 12px;
      }
    }
  }
</style>
